
.header{
  width: 100%;
  background-color: #fff;
  // text-align: center;
  // padding:30px 0 0px 0;
  margin-bottom:10px;
  border-radius: 5px;
  overflow: hidden;
  margin-top:50px;
  padding-top:15px;

  .background{
    width: 100%;
    height: 80px;
    opacity: .2;
  }

  .profile{
    min-height: 90px;
    padding:0 15px 0 170px;
  }

  .actions{
    float:right;
    > a {
      display: inline-block;
      padding:0 10px 0 10px;
      margin-right:15px;
      height: 30px;
      line-height: 30px;
      border:1px solid #007bff;
      border-radius: 4px;
      &:hover{
        background-color: #007bff;
        color:#fff;
      }
    }
  }

  .avatar{
    position: absolute;
    margin-left:-140px;
    margin-top:-50px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border:3px solid #fff;
    background-color: #dbdbdb;
  }

  .nickname{
    font-size: 25px;
    font-weight: bold;
    .male{
      width: 20px;
      height: 20px;
      display: inline-block;
      background-image: url(./images/male.png);
      background-size: cover;
      margin:5px 0 0 5px;
    }
    .female{
      @extend .male;
      background-image: url(./images/female.png);
    }
  }

  .follow{
    > a{
      position: absolute;
      padding:10px;
      border-radius: 4px;
      margin-top: -140px;
      margin-left: -80px;
      border:1px solid #b9b9b9;
    }

  }

}

.actions{
  height: 40px;
  padding-top:10px;
}

.follow{
  float:right;
  margin-right:10px;
}

.tab{
  width:100%;
  background-color: #fff;
  // margin-bottom:10px;
  text-align: center;
  margin-top:10px;
  height: 50px;

  a{
    font-size: 14px;
    height: 50px;
    width: 16.666%;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    // border-bottom:1px solid #e0e0e0;
    color:#484848;

    span {
      display: block;
      // margin-left:5px;
      // color:#c1c1c1;
    }

  }

  :global .active{
    color:#007bff;
    // border-bottom:3px solid #333;
  }
}


@media (min-width: 0px) and (max-width: 767px) {

  .header{

    margin-top:20px;

    .profile{
      min-height:70px;
      padding-left:100px;
    }

    .avatar{
      width: 80px;
      height: 80px;
      margin-left:-90px;
      margin-top:-30px;
    }
  }

}
